<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>任务列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-card {
        border-radius: 5px;
        box-shadow: none;
      }
      
      .lists {
        padding: 20px;
      }
      
      .lists li {
        margin-bottom: 15px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
      }
      
      .lists li .left_name {
        color: #9098AB;
         white-space: nowrap;
      }
      
      .lists li .right_name {
        color: #333333;
        float: right;
      }
      
      .btntxt {
        width: 100%;
        text-align: right;
        font-size: 14px;
        padding-right: 20px;
        color: #3188FE;
      }
      
      .mui-navigate-right:after,
      .mui-push-right:after {
        right: 15px;
        color: #3188FE;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left text-white"></a>
        <h1 class="mui-title">任务列表</h1>
      </header>
      <div id="refreshContainer" class="mui-scroll-wrapper mui-content">
        <div class="mui-scroll">
          <div class="mui-card card_content" v-for="item in list" :key="item.id" v-cloak>
            <div class="mui-card-content">
              <ul class="mui-table-view lists">
                <li class="lis">
                  <span class="left_name">设备：</span>
                  <span class="right_name">{{item.dn}}</span>
                </li>
                <li class="lis">
                  <span class="left_name">厂商/规格/型号：</span>
                  <span class="right_name">{{item.v}}/{{item.m}}</span>
                </li>
                <li class="lis">
                  <span class="left_name">位置编码：</span>
                  <span class="right_name">{{item.lc}}</span>
                </li>
                <li class="lis">
                  <span class="left_name">检修任务：</span>
                  <span class="right_name">{{item.n}}</span>
                </li>
                <li class="lis">
                  <span class="left_name">计划开始时间：</span>
                  <span class="right_name">{{formatDate(item.st, 'yyyy-MM-dd hh:mm')}}</span>
                </li>
                <li class="lis">
                  <span class="left_name">计划结束时间：</span>
                  <span class="right_name">{{formatDate(item.et, 'yyyy-MM-dd hh:mm')}}</span>
                </li>
              </ul>
            </div>
            <div class="mui-card-footer">
              <a class="mui-navigate-right btntxt" @tap="toDetail(item)">准备工作</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="../../../js/mui.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../js/mkeyplus.base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.init({
        pullRefresh: {
          container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
          down: { //下拉刷新
            style: 'circle',
            height: 50, //可选,默认50.触发下拉刷新拖动距离,
            auto: false, //可选,默认false.首次加载自动下拉刷新一次
            contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              vm.form.page = 1;
              vm.getList();
            }
          },
          up: { //上拉加载
            height: 50, //可选.默认50.触发上拉加载拖动距离
            auto: false, //可选,默认false.自动上拉加载一次
            contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
            callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              vm.getList();
            }
          }
        }
      })
      
      
      if (window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }
      function plusready() {
        var self = plus.webview.currentWebview();
        vm.form.projectId = self.projectId
        vm.getList()
        
      }
      
      let vm = new Vue({
        el: "#container",
        data: {
          form: {
            page: 1,
            size: 20,
            projectId: '',
            category: 0
          },
          list: []
        },
        created: function() {},
        methods: {
          getList() {
            if(this.form.page == 1) {
              plus.nativeUI.showWaiting('加载中')
            }
            mui.baseApp.httpRequst('get', '/app/api/task/technicalConfirm', this.form, (data) => {
              plus.nativeUI.closeWaiting()
              let list = this.list
              if(this.form.page == 1) { //第一页下拉
                mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
                list = data.records
              } else {
                list = list.concat(data.records)
              }
              this.list = list
              this.form.page++
                if(data.records.length < this.form.size) {
                  mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
                  mui("#refreshContainer").pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
                } else {
                  mui("#refreshContainer").pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
                }
            })
          },
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp,fmt)
          },
          toDetail(item) {
            // projectCategory  项目分类，0:常规项目 1:单任务项目
            mui.baseApp.openWindow('./disclose.html',{projectTaskId: item.id, projectCategory:0})
          },
        },
      })
      
      window.addEventListener('back', function(event) {
        let data = event.detail
        vm.form.page = 1
        vm.getList()
      });
    </script>
  </body>

</html>